<div class="Card DashboardStats">
  <div class="CardBlock">

    <div class="TitleBlock">
      <h4 class="Title">Stats</h4>
      <p class="TitleDescription">
        Website metrics for
        <a
          href="https://github.com/modularcode/modular-admin-html"
          target="_blank">your awesome project</a>
      </p>
    </div>

    <div class="row -row-compact -row-minimal-lg StatsRow">

      <div class="col-xs-12 col-sm-6 StatCol">
        <div class="StatGroup">

          <div class="Stat">
            <div class="Icon">
              <i class="pe-7s-cart"></i>
            </div>
            <div class="StatContent">
              <div class="StatValue">
                5407
              </div>
              <div class="StatName">
                Active items
              </div>
            </div>
          </div>
          <div class="Progress -sm">
            <div class="Bar -bg-light-green-300" style="width: 75%;"></div>
          </div>
        </div>
      </div>

      <div class="col-xs-12 col-sm-6 StatCol">
        <div class="StatGroup">

          <div class="Stat">
            <div class="Icon">
              <i class="pe-7s-credit"></i>
            </div>
            <div class="StatContent">
              <div class="StatValue">
                78464
              </div>
              <div class="StatName">
                Items sold
              </div>
            </div>
          </div>

          <div class="Progress -sm">
            <div class="Bar -bg-light-blue" style="width: 25%;"></div>
          </div>
        </div>
      </div>

      <div class="col-xs-12 col-sm-6 StatCol">
        <div class="StatGroup">

          <div class="Stat">
            <div class="Icon">
              <i class="pe-7s-cash"></i>
            </div>
            <div class="StatContent">
              <div class="StatValue">
                $80.560
              </div>
              <div class="StatName">
                Monthly income
              </div>
            </div>
          </div>

          <div class="Progress -sm">
            <div class="Bar -bg-orange" style="width: 60%;"></div>
          </div>
        </div>
      </div>



      <div class="col-xs-12 col-sm-6 StatCol">
        <div class="StatGroup">

          <div class="Stat">
            <div class="Icon">
              <i class="pe-7s-users"></i>
            </div>
            <div class="StatContent">
              <div class="StatValue">
                359
              </div>
              <div class="StatName">
                Total users
              </div>
            </div>
          </div>

          <div class="Progress -sm">
            <div class="Bar -bg-cyan" style="width: 34%;"></div>
          </div>
        </div>
      </div>


      <div class="col-xs-12 col-sm-6 StatCol">
        <div class="StatGroup">

          <div class="Stat">
            <div class="Icon">
              <i class="pe-7s-check"></i>
            </div>
            <div class="StatContent">
              <div class="StatValue">
                59
              </div>
              <div class="StatName">
                Tickets closed
              </div>
            </div>
          </div>

          <div class="Progress -sm">
            <div class="Bar -bg-purple" style="width: 49%;"></div>
          </div>
        </div>
      </div>

      <div class="col-xs-12 col-sm-6 StatCol">
        <div class="StatGroup">

          <div class="Stat">
            <div class="Icon">
              <i class="pe-7s-piggy"></i>
            </div>
            <div class="StatContent">
              <div class="StatValue">
                $780.064
              </div>
              <div class="StatName">
                Total income
              </div>
            </div>
          </div>

          <div class="Progress -sm">
            <div class="Bar -bg-amber" style="width: 15%;"></div>
          </div>
        </div>
      </div>



    </div>

  </div>
</div>
